<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        .header ,.footer{
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 100px;
            color: #fff;
        }
        .footer{
            height: 300px;
        }
        ul{
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0 auto;
            padding-top: 10px;
        }
        li{
            width: 280px;border: 1px solid #333;
            padding: 5px;box-sizing: border-box;
            margin-bottom: 10px;
        }
        li>img{
            width: 266px;
            display: block;
        }
        .loading{
            width:120px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <ul>
        <!-- 渲染数据 -->
    </ul>
    <img class="loading" src="https://img.zcool.cn/community/01be9356d975a332f875520fc5a51e.gif">
    <div class="footer">底部</div>
    <script src="./dm_list.js"></script>

    <!-- 分析:
    默认一页分为8条,
    加载下一页的行为放在一个定时器,定时器目的为了模拟网络延迟
    拉到底的时候,加载的一部分数据要出来
    类似分页,后一页的数据填充上一页的数据后面 -->

    <!-- 获取元素-->
    <script>
        var contentBox=document.querySelector("ul");
        var loading=document.querySelector(".loading");
    </script>

    <script>
        // 一.准备变量
        // <!-- 1.准备变量---表示一页有多少条 -->
        var pageSize=8;

        // <!-- 2.表示当前是第几页 -->
        var current=1

        // <!-- 3.一共多少页 -->
        var total=Math.ceil(list.length/pageSize);

        // 4.开关
        var flag=true;

        // 二.准备函数
        // 1.从原始数组里面截取部分的数据渲染页面
        // 2.打开页面执行函数
        // 3.随着浏览器的滚动条的滚动,去加载下一页的数据
        // 一页放4条 [0-3]
        // 一页放8条 [0-7]
        function bindHtml(){
            // 2-1截取数组,
            var bindList=list.slice((current-1)*pageSize,current*pageSize)
            // console.log(bindList);
            // 2-2渲染页面
            // 注意:赋值用= ,将来第二页覆盖的第一页
            contentBox.innerHTML+=bindList.reduce(function(prev,item){
                return prev+`
                    <li>
                        <img src=${item.pic}>
                        <p>活动名称:${item.name}</p>
                        <p>活动城市:${item.city}</p>
                        <p>活动地址:${item.address}</p>
                        <p>活动价格:${item.price}</p>
                        <p>活动时间:${item.showTime}</p>
                    </li>
                `
            },"")
        }
        bindHtml()

        // 3.随着滚动,找一个合适的时机加载下一页
        // 3-1.绑定滚动事件
        window.onscroll=function(){
            // 3-2,判断最后一页加载完毕
            if(current>total) return

            // 3-3 获取各种尺寸的判断
            // 卷去的高度+可视窗口高度 <= ul上方的偏移量+元素的高度
            //  3-3-1 卷去的高度
            var scrollTop=document.documentElement.scrollTop;
            // console.log(scrollTop);//滚动多少 

            // 3-3-2 可视窗口高度
            var windowHeight=document.documentElement.clientHeight;
            // console.log(windowHeight);//700多

            // 3-3-3 ul上方的偏移量
            var ulTop=contentBox.offsetTop;
            // console.log(ulTop);//100

            // 3-3-4 元素的高度
            var ulHeight=contentBox.offsetHeight;
            // console.log(ulHeight);

            if(scrollTop+windowHeight <= ulTop+ ulHeight){
                
                if(flag===false) return;//判断开关是否是开启的

                //  console.log("滚--满足条件");
                loading.style.display="flex";

                flag=false;//关闭开关

                // 加载下一页,以定时器的方式去进行模拟
                setTimeout(function(){
                    //切换当前页面
                    current++;
                    //重新渲染页面
                    bindHtml()
                    //关闭loading的效果
                    loading.style.display="none";
                    flag=true
                },Math.floor(Math.random()*3003)+2000)
            }

        }




    </script>

    

</body>
</html>